<template>
    <div class="MyCourse">
        <TopBar class="t" :title="'我的课程'"  :url="'/index/my'"></TopBar>
        <ul ref="select">
            <span></span>
            <li>全部</li>
            <li>健身</li>
            <li>瑜伽</li>
            <li>跑步</li>
            <li>骑行</li>
        </ul>
        <div>
            <div>
                <div></div>
                <div @click="clickHandle">
                    <h4>马甲线养成计划初级课程</h4>
                    <div>
                        <div></div>
                        <span>OMINIBASS</span>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div></div>
                <div>
                    <h4>马甲线养成计划初级课程</h4>
                    <div>
                        <div></div>
                        <span>OMINIBASS</span>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div></div>
                <div>
                    <h4>马甲线养成计划初级课程</h4>
                    <div>
                        <div></div>
                        <span>OMINIBASS</span>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div></div>
                <div>
                    <h4>马甲线养成计划初级课程</h4>
                    <div>
                        <div></div>
                        <span>OMINIBASS</span>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div></div>
                <div>
                    <h4>马甲线养成计划初级课程</h4>
                    <div>
                        <div></div>
                        <span>OMINIBASS</span>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div></div>
                <div>
                    <h4>马甲线养成计划初级课程</h4>
                    <div>
                        <div></div>
                        <span>OMINIBASS</span>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div></div>
                <div>
                    <h4>马甲线养成计划初级课程</h4>
                    <div>
                        <div></div>
                        <span>OMINIBASS</span>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div></div>
                <div>
                    <h4>马甲线养成计划初级课程</h4>
                    <div>
                        <div></div>
                        <span>OMINIBASS</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TopBar from "../../component/TopBar";
    export default {
        name: "MyCourse",
        data() {
            return {}
        },
        components:{
            TopBar
        },
        methods:{
            clickHandle(){
                this.$router.push("/search/allcourses");
            }
        },
        mounted() {
            let span=this.$refs.select.children[0]
            let prev;
            let lis=Array.from(this.$refs.select.children).slice(1)
            lis.forEach(i=>i.addEventListener('click',clickHandler))
            function clickHandler(e) {
                let index=lis.indexOf(this)
                span.style.left=`${0.3+index*0.7}rem`
            }
        }
    }
</script>

<style scoped>
    .t{
        margin-left: 20px;
        margin-top: 10px;
    }
    h4 {
        font-size: 0.12rem;
        margin-left: -0.05rem;
        transform: scale(.9);
    }

    .MyCourse {
        position: relative;
        padding: 0.1rem;
    }

    .MyCourse > div {
        margin-bottom: 0.18rem;
    }

    .MyCourse > div > div {
        display: flex;
        margin-left: 0.2rem;
    }

    h4 + div > div {
        height: 0.16rem;
        width: 0.16rem;
        border-radius: 50%;

        background: url("../../assets/img/my-back.jpg") no-repeat;
        background-size: 100%;
    }

    h4 + div {
        display: flex;
        margin-top: 0.03rem;
    }

    h4 + div span {
        color: #cccccc;
        font-size: 0.12rem;
        margin-left: 0.02rem;
        transform: scale(.9);
    }

    .MyCourse > div > div > div:nth-child(1) {
        height: 0.5rem;
        width: 0.5rem;
        background: url("../../assets/img/my-back.jpg") no-repeat;
        background-size: 100%;
        border-radius: 7%;
        margin-right: 0.05rem;
    }

    .MyCourse h1 {
        margin-left: 0.25rem;
        font-size: 0.16rem;
    }

    .MyCourse h1::before {
        content: "";
        border-left: 0.02rem solid black;
        border-bottom: 0.02rem solid black;
        width: 0.09rem;
        height: 0.09rem;
        transform: rotate(45deg);
        position: absolute;
        left: 0.2rem;
        top: 0.18rem;
    }

    ul {
        position: relative;
        margin: 0.15rem 0 0.15rem 0;
        display: flex;
        justify-content: space-around;
    }

    ul li {
        color: #cccccc;
        font-size: 0.12rem;
    }

    ul span {
        position: absolute;
        transition: all .5s;
        left: 0.3rem;
        bottom: -0.04rem;
        width: 0.1rem;
        height: 0.02rem;
        background-color: black;
    }
</style>